<template>
  <view class="input-item">
    <up-input
      ref="uInputRef"
      :customStyle="inputStyle"
      :prefixIcon="iconType"
      v-model.lazy="searchContent"
      prefixIconStyle="font-size:7.2vw;color:black;margin:0.6vw 0 0 1vw;font-weight:560;"
      fontSize="3.6vw"
      color="black"
      :placeholder="showText"
      placeholderStyle="color:#d5d5d5;font-size:3.6vw;font-weight:bold;"
      shape="circle"
      type="text"
      inputAlign="left"
      border="none"
      @change="input"
      @blur="comfirmSearch"
      :focus="true"
    >
      <template #suffix>
        <view style="margin-right: 5.2vw; font-size: 3.6vw; color: black; font-weight: bold" @click="handleInput()">{{ buttonType }}</view>
      </template>
    </up-input>
    <view v-show="isShow" @click="selected" class="select">
      <view v-for="(item, index) in filteredItems" :id="index" :key="index">{{ item }}</view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, computed, watch, nextTick, onUpdated } from 'vue';
const uInputRef = ref(null);
//传给父组件的数据
const props = defineProps({
  showText: String,
  iconType: String,
  selectList: Array,
  tagWords: ''
});

//将输入框最终内容传至父组件
const emit = defineEmits(['spread']);
const confirmSpread = (content) => {
  if (content == '') return;
  emit('spread', content); // 第二个参数是传递的数据
};
//输入框样式的定义
const inputStyle = reactive({
  width: '78.6vw',
  height: '5.4vw',
  backgroundColor: 'rgba(245,245,245,1)',
  padding: '2.8vw 0',
  fontFamily: "'Gill Sans', sans-serif",
  marginRight: '5.2vw'
});

// 创建安全的正则表达式
const createSafeRegex = (text) => {
  try {
    // 转义特殊字符
    const escaped = text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
    return new RegExp(escaped, 'i');
  } catch (e) {
    // 如果正则创建失败，返回一个不会匹配任何内容的正则
    return /(?!)/;
  }
};
//输入框绑定的变量
let searchContent = ref('');
//根据输入的内容，筛选父组件传来的数组
const filteredItems = computed(() => {
  if (!searchContent.value) return [];
  const regex = createSafeRegex(searchContent.value);
  return props.selectList.filter((item) => regex.test(item));
});
console.log(filteredItems);
//初始化未选中下拉框中的数据时的状态
const isSelected = ref(false);
//根据判断输入是否为空和下拉是否选中数据来进行隐藏或显示
let isShow = computed(() => {
  return searchContent.value.length > 0 && isSelected.value == true ? true : false;
});
//定义下拉框的点击事件回调函数，通过事件委托,精确定位到选中项并填入输入框
function selected(e) {
  searchContent.value = filteredItems._value[e.target.id];
  isSelected.value = false;
}
//注册输入内容改变事件回调函数
function input() {
  isSelected.value = true;
}
//输入框失去焦点，传出最终内容
function comfirmSearch() {
  confirmSpread(searchContent.value);
  isSelected.value = false;
}
//侦听传入的tagWords，并将新值填入输入框
onUpdated(async () => {
  isSelected.value = false;
  //避免误触标签外区域元素造成传入underfined变量
  if (props.tagWords == undefined) return;
  console.log(props.tagWords);
  searchContent.value = props.tagWords;
  await nextTick();
  uInputRef.value?.$el?.querySelector('input')?.focus();
});
//根据输入框内容的变化，改变输入框右方按钮显示与功能
const buttonType = computed(() => {
  return searchContent.value == '' ? '取消' : '清空';
});
function handleInput() {
  // uInputRef.value?.$el?.querySelector('input')?.focus();
  if (buttonType._value == '取消') {
    console.log('取消了');
    uni.navigateBack();
  } else if (buttonType._value == '清空') {
    console.log('清空了');
    searchContent.value = '';
    console.log(props.tagWords);
  }
  // uInputRef.value?.$el?.querySelector('input')?.focus();
}
</script>

<style lang="scss" scoped>
.input-item {
  position: relative;
  .select {
    width: 56vw;
    max-height: 100vw;
    position: absolute;
    top: 11vw;
    left: 9vw;
    z-index: 5;
    background-color: #aaa;
    view {
      height: 7.2vw;
      font-size: 4vw;
      text-align: left;
      line-height: 7.2vw;
      color: gray;
      border-bottom: 1px solid gray;
      background-color: #fff;
      &:hover {
        background-color: #ddd;
      }
    }
  }
}
</style>
